Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    extClass: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    background: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: ''
    },
    back: {
      type: Boolean,
      value: true
    },
    loading: {
      type: Boolean,
      value: false
    },
    homeButton: {
      type: Boolean,
      value: false,
    },
    animated: {
      // 显示隐藏的时候opacity动画效果
      type: Boolean,
      value: true
    },
    show: {
      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
      type: Boolean,
      value: true,
      observer: '_showChange'
    },
    // back为true的时候，返回的页面深度
    delta: {
      type: Number,
      value: 1
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: '',
    ios: true,
    innerPaddingRight: '',
    leftWidth: '',
    safeAreaTop: '',
    statusBarHeight: 0,
    titlePosition: ''
  },
  lifetimes: {
    attached() {
      // 获取系统信息
      const systemInfo = wx.getSystemInfoSync();
      // 获取胶囊按钮位置信息
      const rect = wx.getMenuButtonBoundingClientRect();
      const isAndroid = systemInfo.platform === 'android';
      const isDevtools = systemInfo.platform === 'devtools';
      
      // 状态栏高度
      const statusBarHeight = systemInfo.statusBarHeight;
      // 胶囊按钮右侧到屏幕右侧的距离
      const menuRight = systemInfo.windowWidth - rect.right;
      // 胶囊按钮左侧到屏幕左侧的距离
      const menuLeft = rect.left;
      // 胶囊按钮高度
      const menuHeight = rect.height;
      // 导航栏高度 = 胶囊高度 + 上下边距
      const navHeight = isAndroid ? (48 + statusBarHeight) : (menuHeight + (rect.top - statusBarHeight) * 2);
      // 导航栏垂直居中位置调整
      const navTop = isAndroid ? statusBarHeight : (rect.top - statusBarHeight);
      
      // 计算标题水平和垂直居中位置
      const titlePosition = `left: 50%; top: 50%; transform: translate(-50%, -50%);`;

      this.setData({
        ios: !isAndroid,
        innerPaddingRight: `padding-right: ${menuRight * 1.5}px`,
        leftWidth: `width: ${menuRight * 2 + menuHeight}px`,
        statusBarHeight,
        navHeight,
        navTop: `margin-top: ${navTop}px`,
        titlePosition,
        safeAreaTop: isDevtools || isAndroid ? 
          `height: calc(var(--height) + ${statusBarHeight}px); padding-top: ${statusBarHeight}px` : 
          `height: calc(var(--height) + ${statusBarHeight}px); padding-top: ${statusBarHeight}px`
      });
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _showChange(show) {
      const animated = this.data.animated
      let displayStyle = ''
      if (animated) {
        displayStyle = `opacity: ${show ? '1' : '0'
          };transition:opacity 0.5s;`
      } else {
        displayStyle = `display: ${show ? '' : 'none'}`
      }
      this.setData({
        displayStyle
      })
    },
    back() {
      const data = this.data
      if (data.delta) {
        wx.navigateBack({
          delta: data.delta
        })
      }
      this.triggerEvent('back', { delta: data.delta }, {})
    }
  },
})
